<template>
  <Card>
    <p slot="title">单位消防设施情况</p>
    <ul class="toolbar" slot="extra">
      <li class="item">
        <Input
          v-model="keyword"
          placeholder="输入单位名称以搜索"
          :search="true"
          style="width:300px;"
          enter-button="立即搜索"
          size="default"
        ></Input>
      </li>
    </ul>
    <Table :columns="tableColumns" :data="tableData" :height="800"></Table>
    <Divider />
    <Page :total="pageCount" show-elevator @on-change="renderTable" />
    <Spin v-if="loading" fix size="large"></Spin>
  </Card>
</template>

<script>
export default {
  name: "",
  data() {
    return {
        loading:false,
        keyword:null,
        pageCount:0,
        tableData:[],
        tableColumns:[{
            title:'序号',
            key:'index',
            align:'center',
            width:80
        },{
            title:'单位名称',
            key:'beName',
            align:'center'
        },{
            title:'单位地点',
            key:'exeAddress',
            align:'center'
        },{
            title:'消防设施数量',
            key:'exeTime',
            align:'center'
        },{
            title:'设施损坏数',
            key:'exeName',
            align:'center'
        },{
            title:'设施维修数',
            key:'exeDepName',
            align:'center'
        },{
            title:'设施安全等级',
            key:'exeDepName',
            align:'center'
        }]
    };
  },
  methods:{
      renderTable(){
          this.loading = true
          this.tableData = [];
          this.loading=false
      }
  },
  mounted() {
      this.renderTable();
  },
};
</script>

<style lang="" scoped>
</style>